<template>
  <div class="custom-bread-crumb">
    <Breadcrumb :style="{ fontSize: `${fontSize}px` }">
      <BreadcrumbItem v-for="(item,index) in list" :to="item.to" :key="`bread-crumb-${item.name}`">
        <!-- <common-icon style="margin-right: 4px;" :type="item.icon || ''" /> -->
        <span :class="getTheme(index,list)">{{ showTitle(item) }}</span>
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>
<script>
  import {
    showTitle
  } from "@/libs/util";
  import CommonIcon from "@components/common-icon";
  import "./custom-bread-crumb.less";
  export default {
    name: "customBreadCrumb",
    components: {
      CommonIcon
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      fontSize: {
        type: Number,
        default: 14
      },
      showIcon: {
        type: Boolean,
        default: false
      },
      theme: {
        type: String,
        default: 'light',
      },
    },
    methods: {
      showTitle(item) {
        return showTitle(item, this);
      },
      isCustomIcon(iconName) {
        return iconName.indexOf("_") === 0;
      },
      getCustomIconName(iconName) {
        return iconName.slice(1);
      },
      getTheme(index, list) {
        var length = list.length;
        var key = this.theme;
        switch (key) {
          case 'light':
            if (length === 0) {
              return 'dark'
            } else {
              if (index === (length-1)) {
                return 'dark'
              } else {
                return 'dark-light'
              }
            }

            break;
          case 'dark':
            if (length == 0) {
              return 'white-lightt'
            } else {
             if (index === (length-1)) {
                return 'white'
              } else {
                return 'white-light'
              }
            }
            break;
          default:
            return ''
            break;
        }
      }
    }
  };
</script>